import React from "react"
import {message, Form, Tabs, Button, Layout, Input, Menu, Icon, Tree, Spin, Radio} from 'antd'
import {withRouter} from "react-router-dom";
import {fetchDbInfoApi, modifyDbInfoApi, addDbInfoApi, asyncDbToProFromDbBaseApi} from "../api/databaseManager"

const { TextArea } = Input
const FormItem = Form.Item

class Database extends React.Component {

    state = {
        databaseInfo: {},
        loading: false
    }

    dbId = 0;
    constructor(props, context) {
        super(props, context);

        this.dbId = this.props.match.params.dbId;
        console.info('this.dbId=' + this.dbId);

        window.onhashchange = ()=>{
            this.dbId = this.props.match.params.dbId;
            this.fetchDatabaseInfo();
        }
    }

    componentDidMount() {
        this.fetchDatabaseInfo();
    }

    fetchDatabaseInfo = ()=>{

        let that = this;
        const { form:{ setFieldsValue}} = this.props;
        if(this.dbId < 1) {
            this.setState({...this.state, databaseInfo: {}});
        } else {
            fetchDbInfoApi(this.dbId).then((res) => {
                this.setState({...this.state, databaseInfo: res.data.data});

                that.props.form.resetFields();
                setFieldsValue(res.data.data);
            });
        }
    }

    asyncDbToProFromDbBase = ()=>{

        this.setState({loading: true});
        asyncDbToProFromDbBaseApi(this.dbId).then((res)=>{
            this.setState({loading: false});
        });

    }

    saveDatabaseInfo = ()=>{
        let that = this;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {

                let formData = that.props.form.getFieldsValue();

                if(that.dbId > 0) {
                    formData.id = that.dbId;
                    modifyDbInfoApi(formData).then((res)=>{
                        message.success('保存成功！')
                    });
                } else {
                    addDbInfoApi(formData).then((res)=>{
                        message.success('添加成功！')
                        that.dbId = res.data.data.id;
                    });
                }
            }
        });
    }

    render() {

        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span:  6},
            },
            wrapperCol: {
                sm: { span: 18 },
            },
        };

        return (<Spin spinning={this.state.loading} delay={500}><Form className={"form_item_4 form_row_small_margin"} onSubmit={this.handleSubmit}>
            <FormItem
                {...formItemLayout}
                label="数据库名" >
                {getFieldDecorator('dbName', {
                    initialValue: this.state.databaseInfo.dbName,
                    rules: [{ required: true, message: '数据库名不可为空' }],
                })(
                    <Input className={"ant-col-12"} />
                )}
                <span className="ant-form-text"> 数据库名(英文字母) </span>
            </FormItem>

            <FormItem
                {...formItemLayout}
                label="用户名" >
                {getFieldDecorator('username', {
                    initialValue: this.state.databaseInfo.username,
                    rules: [{ required: true, message: '用户名' }],
                })(
                    <Input className={"ant-col-12"} />
                )}
                <span className="ant-form-text"> 用户名 </span>
            </FormItem>


            <FormItem
                {...formItemLayout}
                label="密码" >
                {getFieldDecorator('password', {
                    initialValue: this.state.databaseInfo.password,
                    rules: [{ required: true, message: '密码不可为空' }],
                })(
                    <Input className={"ant-col-12"} />
                )}
                <span className="ant-form-text"> 密码 </span>
            </FormItem>

            <FormItem
                {...formItemLayout}
                label="hostname" >
                {getFieldDecorator('hostname', {
                    initialValue: this.state.databaseInfo.hostname,
                    rules: [{ required: true, message: 'hostname不可为空' }],
                })(
                    <Input className={"ant-col-12"} />
                )}
                <span className="ant-form-text"> hostname </span>
            </FormItem>

            <FormItem
                {...formItemLayout}
                label="port" >
                {getFieldDecorator('port', {
                    initialValue: this.state.databaseInfo.port,
                    rules: [{ required: true, message: 'port' }],
                })(
                    <Input className={"ant-col-12"} />
                )}
                <span className="ant-form-text"> port </span>
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="是否多租户" >
                {getFieldDecorator('tenant', {
                    initialValue: this.state.databaseInfo.tenant,
                    rules: [{ required: true, message: 'tenant' }],
                })(
                    <Radio.Group>
                        <Radio value="true">是</Radio>
                        <Radio value="false">否</Radio>
                    </Radio.Group>
                )}
                <span className="ant-form-text"> tenant </span>
            </FormItem>

            <FormItem {...formItemLayout} label=" ">
                <Button onClick={()=>{ this.saveDatabaseInfo(); }} type="info">保存</Button>&nbsp;
                <Button onClick={()=>{ this.asyncDbToProFromDbBase(); }} type="primary">同步数据库到项目</Button>
            </FormItem>

        </Form></Spin>)
    }
}

const _Database = Form.create()(Database);
export default withRouter(_Database);